import { Link } from "react-router-dom";
import styles from "./index.module.scss";
import thumb1 from "../../assets/thumb/thumb1.png";
import thumb2 from "../../assets/thumb/thumb2.png";
import thumb3 from "../../assets/thumb/thumb3.png";

const LibraryPage = () => {
  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <div className={styles.headerInner}>
          <Link to="/" aria-label="关闭" className={styles.close}>
            {/* × icon */}
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </Link>
          <div className={styles.title}>课程资源库</div>
          <div style={{ width: 32 }} />
        </div>
      </header>

      <main className={styles.container}>
        {/* 悦读树 */}
        <section className={styles.section}>
          <div className={styles.row}>
            <div className={styles.coverWrap}>
              <img className={styles.cover} src={thumb1} alt="悦读树封面" />
              <span className={styles.badge}>悦读树</span>
            </div>
            <div className={styles.gridList}>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=小班上`}>小班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=小班下`}>小班（下）</Link>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=中班上`}>中班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=中班下`}>中班（下）</Link>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=大班上`}>大班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=大班下`}>大班（下）</Link>
              <Link className={styles.pill} to={`/library/videos?group=悦读树&grade=视频欣赏`}>视频欣赏</Link>
            </div>
          </div>
        </section>

        {/* 辅助资源 */}
        <section className={styles.section}>
          <div className={styles.row}>
            <div className={styles.coverWrap}>
              <img className={styles.cover} src={thumb2} alt="辅助资源封面" />
              <span className={styles.badge}>辅助资源</span>
            </div>
            <div className={styles.gridList}>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=自主游戏`}>自主游戏</Link>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=绘本馆`}>绘本馆</Link>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=经典歌谣`}>经典歌谣</Link>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=看课视频`}>看课视频</Link>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=动画厅`}>动画厅</Link>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=音乐盒`}>音乐盒</Link>
              <Link className={styles.pill} to={`/library/videos?group=辅助资源&grade=幼儿园环境`}>幼儿园环境</Link>
            </div>
          </div>
        </section>

        {/* 课程2018版 */}
        <section className={styles.section}>
          <div className={styles.row}>
            <div className={styles.coverWrap}>
              <img className={styles.cover} src={thumb3} alt="课程2018版封面" />
              <span className={styles.badge}>课程2018版</span>
            </div>
            <div className={styles.gridList}>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=托班上`}>托班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=托班下`}>托班（下）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=小班上`}>小班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=小班下`}>小班（下）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=中班上`}>中班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=中班下`}>中班（下）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=大班上`}>大班（上）</Link>
              <Link className={styles.pill} to={`/library/videos?group=课程2018版&grade=大班下`}>大班（下）</Link>
            </div>
          </div>
        </section>

        <div className={styles.pager}>
          <span className={styles.arrow} aria-hidden="true">‹</span>
          <span>1 / 5</span>
          <span className={styles.arrow} aria-hidden="true">›</span>
        </div>
      </main>
    </div>
  );
};

export default LibraryPage;


